<script setup>
// 系统管理列表数据
import { getCurrentInstance, ref } from 'vue';
import { changeTplStatus, getNoAdminTpl } from '@/api/tpl.js';
import { downloadByUrl } from '@/utils/assets.js';
import { useTableFormatter } from '@/mixins/commonTableFormatter.js';
import { ElMessageBox } from 'element-plus';

const instance = getCurrentInstance();
const { $message } = instance.appContext.config.globalProperties;
const { VITE_INTERFACE_DOMAIN } = import.meta.env;

const { timeFormatter, emptyFormatter } = useTableFormatter();

const tableData = ref([]);
const total = ref(0);
const pageSize = ref(10);
const currentPage = ref(1);
const columns = [
  { prop: 'typeName', label: '模板类型' },
  { prop: 'tplName', label: '名称' },
  { prop: 'createTime', label: '上传时间', formatter: timeFormatter },
  { prop: 'userName', label: '用户手机号' },
  { prop: 'status', label: '状态' },
];
async function getTplData() {
  const returnData = await getNoAdminTpl({
    pageSize: pageSize.value,
    pageNum: currentPage.value,
  });
  if (returnData?.code === 200) {
    tableData.value = returnData.rows;
    total.value = returnData.total;
  }
}
function paginationChange() {
  getTplData();
}
getTplData();
// 修改状态
function changeStatus(row) {
  ElMessageBox.confirm('请确认是否已经修改完成', '提示', {
    confirmButtonText: '已完成',
    cancelButtonText: '未完成',
    type: 'warning',
  })
    .then(async () => {
      const formData = new FormData();
      formData.append('tplCode', row.tplCode);
      formData.append('status', '已完成');
      const returnData = await changeTplStatus(formData);
      if (returnData?.code === 200) {
        $message.success('操作成功');
        await getTplData();
      } else {
        $message.error(returnData?.data);
      }
    })
    .catch(async () => {
      const formData = new FormData();
      formData.append('tplCode', row.tplCode);
      formData.append('status', '未完成');
      const returnData = await changeTplStatus(formData);
      if (returnData?.code === 200) {
        $message.success('操作成功');
        await getTplData();
      } else {
        $message.error(returnData?.data);
      }
    });
}
// 下载文件
function downLoadTpl(item) {
  const prefix = VITE_INTERFACE_DOMAIN.startsWith('http')
    ? VITE_INTERFACE_DOMAIN
    : `${window.location.origin}${VITE_INTERFACE_DOMAIN}`;
  downloadByUrl(`${prefix}/tpl/viewTplFile?tplCode=${item.tplCode}`, item.tplName);
}
</script>

<template>
  <div class="look-other-module">
    <el-table :data="tableData" border size="small">
      <template v-for="(item, index) in columns" :key="index">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :min-width="item.minWidth || 0"
          :formatter="item.formatter || emptyFormatter"
        />
      </template>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="text" @click="changeStatus(row)">修改状态</el-button>
          <el-button type="text" @click="downLoadTpl(row)">下载</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="global-pagination-box">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @change="paginationChange"
      />
    </div>
  </div>
</template>

<style scoped lang="less"></style>
